@{
    ViewData["Title"] = "关于系统";
}

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center">
                <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                    <i class="fas fa-info-circle text-info" style="font-size: 2rem;"></i>
                </div>
                <div>
                    <h2 class="mb-1 fw-bold">关于智能客服系统</h2>
                    <p class="mb-0 text-muted">了解系统的技术架构、功能特性和开发信息</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 系统介绍 -->
        <div class="col-lg-8">
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-robot text-primary me-2"></i>系统概述
                    </h5>
                </div>
                <div class="card-body">
                    <p class="lead">
                        智能客服系统是一个基于先进AI技术的智能客服解决方案，专为制造执行系统(MES)设计，
                        提供24/7全天候智能支持服务。
                    </p>
                    <p>
                        系统集成了最新的自然语言处理技术，能够理解用户的自然语言输入，提供智能化的客服支持。
                        通过深度集成MES系统，支持工单查询、生产计划调整、设备状态监控等核心业务功能。
                    </p>
                    <p>
                        基于向量数据库的智能知识库系统，支持语义搜索和知识检索，为用户提供准确的技术支持和问题解答。
                        系统具备高并发处理能力，支持100+用户同时在线，响应时间控制在2秒以内。
                    </p>
                </div>
            </div>

            <!-- 技术架构 -->
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-layer-group text-success me-2"></i>技术架构
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3 h-100">
                                <h6 class="fw-bold text-primary mb-2">
                                    <i class="fas fa-server me-2"></i>后端技术
                                </h6>
                                <ul class="list-unstyled mb-0">
                                    <li><i class="fas fa-check text-success me-2"></i>ASP.NET Core 8.0</li>
                                    <li><i class="fas fa-check text-success me-2"></i>LangChain.NET AI框架</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Qdrant向量数据库</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Serilog日志系统</li>
                                    <li><i class="fas fa-check text-success me-2"></i>依赖注入架构</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="border rounded p-3 h-100">
                                <h6 class="fw-bold text-success mb-2">
                                    <i class="fas fa-desktop me-2"></i>前端技术
                                </h6>
                                <ul class="list-unstyled mb-0">
                                    <li><i class="fas fa-check text-success me-2"></i>ASP.NET Core MVC</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Bootstrap 5 UI框架</li>
                                    <li><i class="fas fa-check text-success me-2"></i>jQuery交互库</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Font Awesome图标</li>
                                    <li><i class="fas fa-check text-success me-2"></i>响应式设计</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h6 class="fw-bold mb-3">系统架构图</h6>
                        <div class="bg-light rounded p-4 text-center">
                            <div class="row align-items-center">
                                <div class="col-md-3">
                                    <div class="bg-primary text-white rounded p-3 mb-2">
                                        <i class="fas fa-users fa-2x mb-2"></i>
                                        <div>用户界面</div>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <i class="fas fa-arrow-right fa-2x text-muted"></i>
                                </div>
                                <div class="col-md-3">
                                    <div class="bg-success text-white rounded p-3 mb-2">
                                        <i class="fas fa-cogs fa-2x mb-2"></i>
                                        <div>智能客服API</div>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <i class="fas fa-arrow-right fa-2x text-muted"></i>
                                </div>
                                <div class="col-md-3">
                                    <div class="bg-info text-white rounded p-3 mb-2">
                                        <i class="fas fa-brain fa-2x mb-2"></i>
                                        <div>AI推理引擎</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-6 offset-md-3">
                                    <div class="bg-warning text-white rounded p-3">
                                        <i class="fas fa-database fa-2x mb-2"></i>
                                        <div>向量数据库</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能特性 -->
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-star text-warning me-2"></i>核心功能
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-start">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-comments text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">智能对话</h6>
                                    <p class="text-muted mb-0 small">支持自然语言理解和智能回复生成，提供人性化的交互体验</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-start">
                                <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-cogs text-success"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">MES集成</h6>
                                    <p class="text-muted mb-0 small">深度集成制造执行系统，支持核心业务功能操作</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-start">
                                <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-search text-info"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">知识检索</h6>
                                    <p class="text-muted mb-0 small">基于向量数据库的语义搜索，提供准确的技术支持</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-start">
                                <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                                    <i class="fas fa-chart-line text-warning"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">性能监控</h6>
                                    <p class="text-muted mb-0 small">实时监控系统性能，支持高并发访问和快速响应</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 系统信息 -->
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle text-info me-2"></i>系统信息
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>版本号</span>
                        <span class="badge bg-primary">v1.0.0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>构建日期</span>
                        <span class="text-muted">2025-01-XX</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>目标框架</span>
                        <span class="text-muted">.NET 8.0</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>开发语言</span>
                        <span class="text-muted">C#</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span>许可证</span>
                        <span class="text-muted">MIT</span>
                    </div>
                </div>
            </div>

            <!-- 技术栈 -->
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-code text-success me-2"></i>技术栈
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <span class="badge bg-primary me-1 mb-1">ASP.NET Core</span>
                        <span class="badge bg-success me-1 mb-1">LangChain.NET</span>
                        <span class="badge bg-info me-1 mb-1">Qdrant</span>
                        <span class="badge bg-warning me-1 mb-1">Bootstrap</span>
                        <span class="badge bg-secondary me-1 mb-1">jQuery</span>
                        <span class="badge bg-dark me-1 mb-1">Serilog</span>
                    </div>
                </div>
            </div>

            <!-- 开发团队 -->
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-users text-warning me-2"></i>开发团队
                    </6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-user-tie text-primary fa-2x"></i>
                        </div>
                        <h6 class="fw-bold mb-1">智能客服系统团队</h6>
                        <p class="text-muted mb-2 small">专注于AI技术和企业级应用开发</p>
                        <div class="d-flex justify-content-center">
                            <a href="#" class="btn btn-sm btn-outline-primary me-2">
                                <i class="fab fa-github me-1"></i>GitHub
                            </a>
                            <a href="#" class="btn btn-sm btn-outline-info">
                                <i class="fas fa-envelope me-1"></i>联系
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.bg-primary {
    background-color: #667eea !important;
}

.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
}

.btn-primary:hover {
    background-color: #5a6fd8;
    border-color: #5a6fd8;
}

.badge {
    font-size: 0.75rem;
}

.lead {
    font-size: 1.1rem;
    font-weight: 400;
}
</style> 